class AcGameMenu {
    constructor(root) {
        // 将调用这个对象的对象保存到被调用的对象中
        this.root = root;
        // 创建一个div元素并保存到对象中
        this.$menu = $(`
<div class="ac-game-menu">
    <div class="ac-game-menu-field">
        <!--一个类可以有多个类名-->
        <!--类的样式可以通过类名在css文件中设置-->
        <div class="ac-game-menu-field-item ac-game-menu-field-item-single-mode">
            单人模式
        </div>
        </br>
        <div class="ac-game-menu-field-item ac-game-menu-field-item-multi-mode">
            多人模式
        </div>
        </br>
        <div class="ac-game-menu-field-item ac-game-menu-field-item-settings-mode">
            <!--由于这里设置暂时没有用到，所以是借用了一下设置按钮作为退出-->
            <!--设置-->
            退出
        </div>
    </div>
</div>
`);
        // 由于这里我们需要开始写登录逻辑了
        // 所以按照正常的逻辑
        // 是先登录之后，再出现菜单的
        // 所以一开始要先将菜单隐藏
        this.$menu.hide();
        // 将创建的div元素添加到原对象中的$ac_game中
        this.root.$ac_game.append(this.$menu);
        // $menu.find('.ac-game-menu-field-item-single')的作用是
        // 从$menu中抽取出类名为ac-game-menu-field-item-single的元素
        // class前需要加.，id前需要加#
        this.$single_mode = this.$menu.find('.ac-game-menu-field-item-single-mode');
        this.$multi_mode = this.$menu.find('.ac-game-menu-field-item-multi-mode');
        this.$settings_mode = this.$menu.find('.ac-game-menu-field-item-settings-mode');

        this.start();
    }

    // 启动函数
    start() {
        this.add_listening_events();
    }

    // 为各个元素添加监听事件
    add_listening_events() {
        let outer = this;
        this.$single_mode.click(function() {
            // 在本函数中，如果调用this
            // 调用的不是AcGameMenu对象，而是被点击的元素
            // 所以需要用outer来调用AcGameMenu对象
            // 调用AcGameMenu对象的hide()函数
            outer.hide();
            // 调用Playground对象的show()函数
            outer.root.playground.show("single mode");
        });
        this.$multi_mode.click(function() {
            outer.hide();
            outer.root.playground.show("multi mode");
        });
        this.$settings_mode.click(function() {
            outer.root.settings.logout_on_remote();
        });
    }

    // 显示menu
    show() {
        // jquery的show()函数的作用是显示元素
        this.$menu.show();
    }

    // 隐藏menu
    hide() {
        // jquery的hide()函数的作用是隐藏元素
        this.$menu.hide();
    }
}
